import React, { Component } from 'react';
import Divider from 'material-ui/Divider';
import FontIcon from 'material-ui/FontIcon';
import MenuItem from 'material-ui/MenuItem';
import { List, ListItem } from 'material-ui/List';

export default class SideBar extends Component {

  /**
   * 渲染通知的总数
   */
  _renderNotice(count) {
    let thisCount = count;

    if (count == 0) {
      thisCount = '';
    }

    return (
      <span
        style={{
          color: '#F44336',
          textAlign: 'center',
          height: 16,
          marginTop: 16,
          marginBottom: 16,
        }}
      >
        <b>{thisCount}</b>
      </span>
    );
  }

  /**
   * 跳转页面
   * 增加可视窗口变化控制
   */
  _replaceTo = (pushTo) => {
    this.props.replaceTo(pushTo);
    if (this.props.isSmallViewport) {
      this.props.handleTriggerDrawer();
    }
  };

  /**
   * 跳转界面，清除通知
   * 增加可视窗口变化控制
   */
  _replaceToWithClear = (type, pushTo) => {
    this.props.clearNotification(type);
    this.props.replaceTo(pushTo);
    if (this.props.isSmallViewport) {
      this.props.handleTriggerDrawer();
    }
  };

  /**
   * 开启反馈后关闭侧边
   */
  _openFeedback = () => {
    this.props.handleOpen('openFeedback')
    if (this.props.isSmallViewport) {
      this.props.handleTriggerDrawer();
    }
  };

  render() {
    const { url, color500, notifications, messages } = this.props;

    let defaultColor = 'rgb(117, 117, 117)';

    let defaultFontColor = 'rgba(0, 0, 0, 0.870588)';

  	return (
      <div>
        <MenuItem
          primaryText='首页'
          leftIcon={
            <FontIcon 
              className="icon-home" 
              color={url == '/i' ? color500 : defaultColor} 
            />
          }
          onClick={this._replaceTo.bind(this, '/i')}
          style={{
            paddingLeft: 4,
            color: url == '/i' ? color500 : defaultFontColor
          }}
        />

        <MenuItem
          primaryText='发现'
          leftIcon={
            <FontIcon 
              className="icon-star" 
              color={url == '/find' ? color500 : defaultColor} 
            />
          }
          onClick={this._replaceTo.bind(this, '/find')}
          style={{
            paddingLeft: 4,
            color: url == '/find' ? color500 : defaultFontColor
          }}
        />

        <MenuItem
          primaryText='好友 & 私信'
          leftIcon={
            <FontIcon 
              className="icon-people" 
              color={url == '/friends' ? color500 : defaultColor} 
            />
          }
          onClick={this._replaceToWithClear.bind(this, 'clear_messages', '/friends')}
          style={{
            paddingLeft: 4,
            color: url == '/friends' ? color500 : defaultFontColor
          }}
        />

        <MenuItem
          primaryText='我的活动'
          leftIcon={
            <FontIcon 
              className="icon-insert_invitation" 
              color={url == '/activity/me' ? color500 : defaultColor} 
            />
          }
          onClick={this._replaceTo.bind(this, '/activity/me')}
          style={{
            paddingLeft: 4,
            color: url == '/activity/me' ? color500 : defaultFontColor
          }}
        />

        <MenuItem
          primaryText='个人资料'
          leftIcon={
            <FontIcon 
              className="icon-account_circle" 
              color={url == '/user/' + this.props.userId ? color500 : defaultColor}
            />
          }
          onClick={this._replaceTo.bind(this, '/user/' + this.props.userId)}
          style={{
            paddingLeft: 4,
            color: url == '/user/' + this.props.userId ? color500 : defaultFontColor
          }}
        />

        <MenuItem
          primaryText={
            <div>
              通知
              <span style={{
                color: '#F44336',
                float: 'right'
              }}>
                {this.props.notifications == 0 ? '' : this.props.notifications}
              </span>
            </div>
          }
          leftIcon={
            <FontIcon 
              className="icon-notifications" 
              color={url == '/notifications' ? color500 : defaultColor} 
            />
          }
          onClick={this._replaceToWithClear.bind(this, 'clear_notifications', '/notifications')}
          style={{
            paddingLeft: 4,
            color: url == '/notifications' ? color500 : defaultFontColor
          }}
        />

        <Divider style={styles.hr}/>

        <MenuItem
          primaryText='反馈'
          leftIcon={
            <FontIcon className="icon-announcement" />
          }
          onClick={this._openFeedback.bind(this)}
          style={{paddingLeft: 4}}
        />
      </div>
  	);
  }
};

const styles = {
  hr: {
    marginTop: 8,
    marginBottom: 8
  }
};
